---
description: Компонент для показа кратких сообщений и уведомлений.
---

<Overview group="feedback">

# Snackbar [tag:component]

Компонент для показа кратких сообщений и уведомлений, который можно использовать,
чтобы информировать пользователя о каких-то процессах в приложении, например, "Статья добавлена в закладки".
Имитирует поведение нативных элементов, поддерживает управление жестами.

</Overview>

<Playground>

```jsx
const [snackbar, setSnackbar] = React.useState(null);

const showSnackbar = () => {
  if (snackbar) return;
  setSnackbar(
    <Snackbar
      onClose={() => setSnackbar(null)}
      action="Поделиться"
      before={
        <Avatar size={24} style={{ background: 'var(--vkui--color_background_accent)' }}>
          <Icon16Done fill="#fff" width={14} height={14} />
        </Avatar>
      }
    >
      Ссылка скопирована
    </Snackbar>,
  );
};

return (
  <>
    <Button onClick={showSnackbar}>Показать уведомление</Button>
    {snackbar}
  </>
);
```

</Playground>

## Обязательные свойства

### `onClose`

Свойство принимает функцию, которая вызовется после завершения анимации закрытия компонента.
Обязательно удаляйте из `DOM`-дерева компонент `Snackbar` в обработчике `onClose`, иначе это будет мешать
дальнейшему взаимодействию с элементами и повторному открытию компонента.

> С помощью свойства `duration` можно задать время в миллисекундах, через которое компонент скроется (по умолчанию `4000`).

## Текстовые элементы [#text]

Основной текст сообщения или уведомления передаётся через свойство `children`.
Дополнительный текст под основным можно задать с помощью свойства `subtitle`.

> Свойство `subtitle` не может использоваться одновременно с [кнопкой действия](#action).

## Контент в начале/в конце

В компоненте доступна возможность добавления дополнительного контента слева и/или справа от текста,
задаётся свойством `before` и `after` соответственно.

В `before` рекомендуется размещать следующий контент:

- иконка размером `24px` или `28px`;
- аватар `Avatar` размером `32px`;
- изображение `Image` размером `40px`.

В `after` рекомендуется размещать следующий контент:

- кнопки `Button` размером `size="s"`;
- иконки размером `24px`.

import { BlockWrapper } from '@/components/wrappers';

<Playground Wrapper={BlockWrapper}>
  ```jsx
  <Snackbar.Basic
    before={<Icon28CheckCircleOutline fill="var(--vkui--color_icon_positive)" />}
    after={
      <Button mode="link" appearance="accent" size="s">
        Поделиться
      </Button>
    }
  >
    Ссылка скопирована
  </Snackbar.Basic>
  ```
</Playground>

## Стили отображения

Задаётся свойством `mode`.

- `"default"` — стандартный вид компонент;
- `"dark"` — тёмная тема компонента.

## Позиционирование

### `placement`

Данное свойство отвечает за расположение компонента на экране.

- `"top-start"` — расположение в верхнем левом углу;
- `"top"` — расположение по центру сверху;
- `"top-end"` — расположение в верхнем правом углу;
- `"bottom-start"` — расположение в нижнем левом углу (по умолчанию);
- `"bottom"` — расположение по центру снизу;
- `"bottom-end"` — расположение в нижнем правом углу.

В зависимости от расположения изменяется анимация появления. Так для `"top-start"` появление компонента ожидается
с верхнего левого края, а для `"bottom"` - снизу. Анимация скрытия происходит в обратном направлении.
Также есть возможность скрыть компонент смахиванием в обратную от анимации появления сторону.

> **Ограничения для мобильных устройств**
>
> Значения `"top-start"`/`"top-end"` равносильны `"top"`, чтобы сохранить имитацию нативного поведения.
>
> Значение `"bottom"` равносильно `"bottom-start"`, чтобы избежать вызова системных функций,
> таких как `Pull To Refresh` и Режим управления одной рукой.
>
> Значения `"bottom-start"`/`"bottom-end"` закрываются смахиванием в любое из направлений по горизонтальной оси.

### Отступы

С помощью `offsetY` можно задать отступ (в пикселях) снизу (для всех `placement="bottom*"`) или сверху (для всех `placement="top*"`),
чтобы компонент не перекрывал нужные элементы интерфейса.

## Кнопка действия [#action]

С помощью свойства `action` можно задать название для кнопки действия.

> Свойство `action` не может использоваться одновременно со свойством [`subtitle`](#text).

```jsx
<Snackbar action="Перейти в раздел «Понравилось»" onActionClick={() => alert('Ты - молодец!')}>
  Ссылка сохранена в закладки
</Snackbar>
```

Задать вариант расположения кнопки действия можно с помощью свойства `layout`:

- `"vertical"` — кнопка располагается справа от основного текста;
- `"horizontal"` — кнопка располагается под основным текстом.

По умолчанию на устройствах с шириной больше или равно `ViewWidth.SMALL_TABLET` или при наличии свойства `after`
значение будет равно `"vertical"`, в остальных случаях — `"horizontal"`.

Обработать нажатие на кнопку действия можно с помощью свойства `onActionClick`.

## Snackbar.Basic [tag:component]

Если вам нужен только визуальный компонент без позиционирования и логики смахивания, то используйте `Snackbar.Basic`.
Он будет полезен, если вы используете стороннюю систему уведомлений.

<Playground Wrapper={BlockWrapper}>
  ```jsx
  <Snackbar.Basic
    before={<Icon28CheckCircleOutline fill="var(--vkui--color_icon_positive)" />}
    after={
      <Button mode="link" appearance="accent" size="s">
        Поделиться
      </Button>
    }
  >
    Ссылка скопирована
  </Snackbar.Basic>
  ```
</Playground>

## Свойства и методы [#api]

<PropsTable name="Snackbar">
### Snackbar [#snackbar-api]

### Snackbar.Basic [#snackbar-basic-api]

</PropsTable>
